<template>
  <div class="rating-select">
    <div class="rating-type">
      <span class="block positive"
            :class="{active:selectType===2}"
            @click="selectRatings(2)">
        {{desc.all}}
        <span class="count">{{ratings.length}}</span>
      </span>
      <span class="block positive"
            :class="{active:selectType===1}"
            @click="selectRatings(1)">
        {{desc.positive}}
        <span class="count">{{positives.length}}</span>
      </span>
      <span class="block negative"
            :class="{active:selectType===0}"
            @click="selectRatings(0)">
        {{desc.negative}}
        <span class="count">{{negatives.length}}</span>
      </span>
    </div>
    <div class="rating-switch"
         :class="{on: onlyContent === true}"
         @click="toggleContent">
      <span class="iconfont">&#xe6e1;</span>
      <span class="text">只看内容的评价</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "RatingSelect",
    props: {
      ratings: {
        type: Array,
        default(){
          return []
        }
      },
      selectType: {
        type: Number,
        default: 2
      },
      onlyContent: {
        type: Boolean,
        default: false
      },
      desc: {
        type: Object,
        default(){
          return {
            all: '全部',
            positive: '满意',
            negative: '不满意'
          }
        }
      }
    },
    data(){
      return {
        ratingType: 2
      }
    },
    computed: {
      positives(){
        return this.ratings.filter((rating) => {
          return rating.rateType === 1;
        })
      },
      negatives(){
        return this.ratings.filter((rating) => {
          return rating.rateType === 0;
        })
      }
    },
    methods: {
      selectRatings(type){
        this.$emit('selectRatings',type)
      },
      toggleContent(){
        this.$emit('toggleContent')
      }
    }
  }
</script>

<style scoped lang="stylus">
.rating-select
  .rating-type
    padding 18px 0
    margin 0 18px
    border-bottom 1px solid rgba(7,17,27,.1)
    font-size 0
    .block
      display inline-block
      padding 8px 12px
      line-height 16px
      margin-right 8px
      border-radius 1px
      color rgb(77,85,93)
      font-size 12px
      &.active
        color #fff
      .count
        margin-left 2px
        font-size 8px
      &.positive
        background rgba(0,160,220,.2)
        &.active
          background rgb(0,160,220)
      &.negative
        background rgba(77,85,93,.2)
        &.active
          background rgb(77,85,93)

  .rating-switch
    padding 12px 18px
    line-height 24px
    border-bottom 1px solid rgba(7,17,27,.1)
    color rgb(147,153,159)
    font-size 0
    &.on
      .iconfont
        color #00c850
    .iconfont
      display inline-block
      vertical-align top
      margin-right 4px
      font-size 24px
    .text
      vertical-align top
      font-size 12px
</style>
